<template>
  <div>
    <el-dialog class="dialog" title="URL二维码" :visible.sync="dialogVisible">
      <dl>
        <dt>URL</dt>
        <dd>
          <el-input v-model="urlContainer.shareUrl"/>
        </dd>
        <dt>URL二维码</dt>
        <dd>
          <img :src="urlContainer.qrCodeUrl" alt="二维码" width="100"/>
        </dd>
      </dl>
    </el-dialog>
  </div>


</template>

<script type="text/babel">
  export default {
    data () {
      return {
        msg: 'url qr',
        loading: false,
        dialogVisible: false,
        urlContainer: {
          shareUrl: '',
          qrCodeUrl: ''
        }
      }
    },
    methods: {
      handleMakesure () {
        console.log('make sure')
        this.dialogVisible = false
      },
      init (payload) {
        this.urlContainer = payload
        this.dialogVisible = true
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" rel="stylesheet/scss">

</style>
